import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vant from 'vant'
import 'vant/lib/index.css'
import axios from 'axios'

import { Dialog } from 'vant';
// 全局注册
Vue.use(Dialog);
// 因为拦截器需要弹窗, 这里又拿不到 this.$toast
// 所以要单独引入 Toast 组件
import { Toast } from 'vant'
//设置基准路径baseURL
axios.defaults.baseURL = 'http://157.122.54.189:9083'
//创建一个请求拦截器,验证有没有token
axios.interceptors.request.use((config) => {
  if (!config.headers.Authorization && localStorage.getItem('token')) {
    config.headers.Authorization = "Bearer " + localStorage.getItem('token')
  }
  return config
})
//创建一个全局错误响应拦截器
axios.interceptors.response.use((res) => {
  // 除了明确用户信息验证失败跳转到登录页以外
  // 还可以封装其他的通用处理, 比如有 statusCode 并且是以 4 开头的三位数字
  // 不知道如何处理的情况下, 只需要统一将 message 给提示出来就可以了
  const reg = /^4\d{2}$/
  if (reg.test(res.data.statusCode)) {
    Toast.fail(res.data.message)
  }
  if (res.data.message == '用户信息验证失败') {
    localStorage.clear()
    router.replace('/login')
  }
  // 拦截的时候可以拿到每次请求的 res
  // 最后必须使用 return 记得放行
  return res
})
//创建路由守卫
router.beforeEach((to, from, next) => {
  // 这个函数默认可以获取到 to / from / next
  // to 目的地的路由配置
  // from 来源路由配置
  // next 正常继续下面操作的放行函数
  if (to.meta.needAuth) {
    if (localStorage.getItem('token')) {
      next()
    } else {
      router.push('/login')
    }
  } else {
    next()
  }
})

// 绑定到原型
Vue.prototype.$axios = axios
Vue.use(Vant)
Vue.config.productionTip = false

new Vue({
  router,
  render: function (h) { return h(App) }
}).$mount('#app')
